<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>登录</title>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >


    <link href="signin.css" rel="stylesheet">


    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();

    </script>

</head>
<body class="text-center" background="bg.jpg">
<form class="form-signin needs-validation" action="/pd" method="post" novalidate >
    <img class="mb-4" th:src="log.png" alt="" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal">项目标题</h1>
    <div class="form-label-group">
        <input type="text" id="loginid"  name="loginid" class="form-control" placeholder="账号" pattern="(\w|\W|\d){4,16}" required >
        <div class = "invalid-feedback">
            账号必填,4-16个字符
        </div>
    </div>

    <div class="form-label-group">
        <input type="password" id="pwd" name="pwd" class="form-control" placeholder=" 密码" style="margin-top: 5px" pattern=".{6,20}" required>
        <div class = "invalid-feedback">
            密码必填,6-16个字符
        </div>
    </div>
    <th:block th:if="${session.msg!=null}">
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>注意!</strong> <th:block th:text="${session.msg}"></th:block>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </th:block>

    <button class="btn btn-lg btn-primary btn-block" type="submit" style="margin: 15px 0 10px 0">登录</button>
    <a href="/new" font-size="20px" style="text-decoration: none" ><b>注册</b></a>



</form>
</body>
</html>
